跳到主要内容

加载 Rive 文件(Loading Rive Files)

新版 Runtime(推荐)

统一通过 useRiveFile(...) 加载,然后把返回的 riveFile 传给 RiveView file={riveFile}

支持 4 种来源:

  1. require()(推荐,便于开发与 OTA)
  2. URL
  3. 资源名(native bundle)
  4. ArrayBuffer

方式 1:require()

const { riveFile, isLoading, error } = useRiveFile(require('./assets/flying_car.riv'));

同时确保 metro.config.js 支持 .riv

config.resolver.assetExts.push('riv');

方式 2:URL

const { riveFile } = useRiveFile('https://cdn.rive.app/animations/vehicles.riv');

方式 3:resource name

const { riveFile } = useRiveFile('weather_app'); // weather_app.riv
  • iOS:把 .riv 加入 Xcode target 资源
  • Android:放入 android/app/src/main/res/raw

方式 4:ArrayBuffer

const buffer = await (await fetch(url)).arrayBuffer();
const { riveFile } = useRiveFile(buffer);

Legacy Runtime

Legacy <Rive /> 对应方式:

  • url="..."
  • resourceName="..."
  • source={require('./file.riv')}

Expo 项目可结合 expo-asset + Metro .riv 扩展完成打包。